<template>
    <div id="logs">
        <!-- 面包导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>日志管理</el-breadcrumb-item>
            <el-breadcrumb-item>系统日志</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 右侧卡片区域 -->
        <!-- 用户列表卡片区 -->
        <el-card class="tl-border-none">
            <div slot="header">
                <el-form :inline="true" :model="queryMap" size="small" label-suffix=":">
                    <el-form-item label="IP地址" class="tl-margin-bottom-0">
                        <el-input @keyup.enter.native="search" clearable @clear="search" v-model="queryMap.ip"
                                  placeholder="IP地址">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="操作位置" class="tl-margin-bottom-0">
                        <el-input @keyup.enter.native="search" clearable @clear="search" v-model="queryMap.location"
                                  placeholder="操作位置">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="时间" class="tl-margin-bottom-0">
                        <el-date-picker unlink-panels @change="search" v-model="dateRange" type="datetimerange"
                                        :picker-options="pickerOptions"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="tl-margin-bottom-0">
                        <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item class="tl-margin-bottom-0">
                        <el-button @click="batchDeleteLog" :disabled="this.select.length === 0" icon="el-icon-delete">批量
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格区域 -->
            <el-table border stripe :data="LogData" max-height="450" @selection-change="selectChange">
                <el-table-column align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" type="index" label="#"></el-table-column>
                <el-table-column align="center" prop="operation" label="操作" width="130"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="method" label="方法"
                                 width="180"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="params" label="参数" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.params }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="time" label="耗时" width="100" sortable>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.time >= 2000" size="mini" type="danger">
                            {{ scope.row.time + '毫秒' }}
                        </el-tag>
                        <el-tag size="mini" v-else-if="scope.row.time >= 1000">
                            {{ scope.row.time + '毫秒' }}
                        </el-tag>
                        <el-tag v-else type="success" size="mini">
                            {{ scope.row.time + '毫秒' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="location" label="操作地点"
                                 width="150"></el-table-column>
                <el-table-column align="center" prop="ip" label="IP地址" width="150"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="url" label="请求的URL" width="150">
                </el-table-column>
                <el-table-column prop="createTime" sortable align="center" label="时间" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | dateFormat('yyyy-MM-dd hh:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" icon="el-icon-delete" @click="del(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination class="tl-margin-top-20 tl-text-center" background @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="this.queryMap.pageNum"
                           :page-sizes="[7, 10, 15, 20]"
                           :page-size="this.queryMap.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { dateFormat } from '@/assets/js/filter';

export default {
    name: 'Logs',
    components: {},
    data: function () {
        return {
            select: [], // 选中的值显示
            LogData: [],
            total: 0, // 总共多少条数据
            dateRange: [],
            queryMap: {
                pageNum: 1,
                pageSize: 7,
                ip: '',
                location: '',
                startTime: null,
                endTime: null
            }, // 查询对象
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    methods: {
        async batchDeleteLog () {
            const ids = this.select.map(item => item.id).join(); // 获取所有选中行的id组成的字符串，以逗号分隔
            await this.$confirm('此操作将永久批量删除系统日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete(`log/batch/${ids}`);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                await this.getLogList();
            }).catch(() => {
                this.$message({ showClose: true, type: 'info', message: '已取消删除' });
            });
        },

        selectChange (select) {
            this.select = select;
        },
        // 搜索
        search () {
            this.queryMap.pageNum = 1;
            this.getLogList();
        },
        // 加载系统日志列表
        async getLogList () {
            if (this.dateRange && this.dateRange.length) {
                this.queryMap.startTime = dateFormat(this.dateRange[0], 'yyyy-MM-dd hh:mm:ss')
                this.queryMap.endTime = dateFormat(this.dateRange[1], 'yyyy-MM-dd hh:mm:ss')
            } else {
                this.queryMap.startTime = null
                this.queryMap.endTime = null
            }
            // console.log(this.queryMap.startTime, this.queryMap.endTime)
            const { data: res } = await this.$http.get('/logs', {
                params: this.queryMap
            });
            if (res.code ^ 200) {
                return this.$message({ showClose: true, message: res.msg, type: 'error' });
            }
            if (!res.data.rows.length && (this.queryMap.pageNum ^ 1)) {
                this.queryMap.pageNum--;
                return await this.getLogList();
            }
            this.total = res.data.total;
            this.LogData = res.data.rows;
        },
        // 删除系统日志
        async del (id) {
            await this.$confirm('此操作将永久删除该系统日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete(`/log/${id}`);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                await this.getLogList();
            }).catch(() => {
                this.$message({ showClose: true, type: 'info', message: '已取消删除' });
            });
        },
        // 改变页码
        handleSizeChange (newSize) {
            this.queryMap.pageSize = newSize;
            this.getLogList();
        },
        // 翻页
        handleCurrentChange (current) {
            this.queryMap.pageNum = current;
            this.getLogList();
        }
    },
    created: function () {
        this.getLogList()
    }
}
</script>

<style lang='less' scoped>
::v-deep .el-table__fixed-right {
    height: 100%;
}
</style>
